<template>
	<view class="my">
		<!-- 支付宝自定义导航栏 -->
		<CustomBar />
		<view class="content">
			<u-toast ref="uToast"></u-toast>
			<view class="top">
				<u-button @click="login" v-if="!token" class="btn-login" shape="circle">一键登录</u-button>
				<view class="userInfo" v-else>
					<!-- #ifdef MP-WEIXIN -->
					<view style="margin-right: 20rpx;">
						<u-icon name="weixin-circle-fill" size="120"></u-icon>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<image :src="userInfo.avatar" alt="" />
					<!-- #endif -->
					<view>
						<view class="nickName">{{userInfo.nickName}}</view>
						<view class="tip">您好，热爱骑行的朋友</view>
					</view>
				</view>
			</view>
			<!-- #ifdef MP-ALIPAY -->
			<view class="center panel">
				<view class="item">
					<view class="num">{{starNum.collectNum}}</view>
					<view>收藏</view>
				</view>
				<view class="item">
					<view class="num">0</view>
					<view>历史</view>
				</view>
				<view class="item">
					<view class="num">{{starNum.commentNum}}</view>
					<view>评论</view>
				</view>
			</view>
			<!-- #endif -->
			<view class="common-tools panel">
				<view class="title">常用工具</view>
				<view class="tools-list">
					<view class="item" @click="feedBack">
						<u-icon name="email" color="skyblue"></u-icon>
						<view class="text">反馈建议</view>
					</view>
					<view class="item" @click="reward">
						<u-icon name="red-packet" color="skyblue"></u-icon <view>
						<view class="text">打赏</view>
					</view>
				</view>
			</view>
			<u-button class="logout" v-if="token" @click="logout" shape="circle">退出登录</u-button>
		</view>
		<u-popup :show="isShowFeedBackPopup" mode="center" animation @close="handlePopupClose">
			<view class="popup-comment">
				<u-textarea class="textarea" v-model="textareaValue" placeholder="请输入您的宝贵意见"
					:custom-style="{height: '250rpx'}" :maxlength="100">
				</u-textarea>
			</view>
			<u-button type="primary" @click="submitFeedBack" :disabled="!textareaValue.length">
				提交
			</u-button>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
	</view>
</template>

<script>
	import request from '../../api/index.js'
	export default {
		name: 'my',
		data() {
			return {
				isShowFeedBackPopup: false,
				textareaValue: '',
				starNum: {
					commentNum: 0,
					collectNum: 0
				}
			}
		},
		onLoad() {
			console.log(this.platform)
			// #ifdef MP-ALIPAY
			if (this.token) {
				this.getStarNum()
			}
			// #endif
		},
		onShow() {
			// #ifdef MP-ALIPAY
			uni.setNavigationBar({
				frontColor: '#0000',
				backgroundColor: '#ffffff',
			})
			// #endif
		},
		computed: {
			token() {
				return this.$store.state.token
			},
			userInfo() {
				return this.$store.state.userInfo
			},
			platform() {
				return this.$store.state.platform
			}
		},
		methods: {
			feedBack() {
				if (this.token) {
					this.isShowFeedBackPopup = true
				} else {
					this.$refs.uToast.show({
						type: 'default',
						message: '未登录,请先登录',
					})
				}
			},
			handlePopupClose() {
				this.isShowFeedBackPopup = false;
			},
			logout() {
				request(`/user/${this.platform === 'mp-weixin' ? 'wxLogout' : 'logout'}`).then(res => {
					if (res.status === 0) {
						uni.showToast({
							icon: "success",
							title: res.msg
						});
						this.$store.commit('clearUserInfo')
						this.starNum = {
							commentNum: 0,
							collectNum: 0
						}
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						});
					}
				})
			},
			submitFeedBack() {
				request(`/feedback/${this.platform === 'mp-weixin' ? 'wxAdd' : 'add' }`, {
					content: this.textareaValue,
					source: this.platform === 'mp-weixin' ? 'weixin' : 'zfb'
				}).then(res => {
					if (res.status === 0) {
						this.$refs.uToast.show({
							type: 'default',
							message: "反馈成功，会仔细解决您说的问题",
						})
						this.isShowFeedBackPopup = false
						this.textareaValue = ''

					}
				})
			},
			getStarNum() {
				request('/user/starNum', {}, 'GET').then(res => {
					console.log(res)
					if (res.status === 0) {
						this.starNum = res.data
					}
				})
			},
			login() {
				// #ifdef MP-WEIXIN
				uni.login({
					success: (res) => {
						if (res.code) {
							request('/user/wxLogin', {
								code: res.code
							}).then(res => {
								console.log(res)
								if (res.status === 0) {
									this.$store.commit('setUserInfo', res.data.userInfo)
									this.$store.commit('setToken', res.data.token)
									uni.showToast({
										icon: "success",
										title: res.msg
									});
								}
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					},
					fail: (res) => {
						console.log(res, 'loginErr')
					},
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
					scopes: 'auth_user',
					success: res => {
						request('/user/login', {
							authCode: res.authCode
						}).then(res => {
							console.log(res)
							if (res.status === 0) {
								this.$store.commit('setUserInfo', res.data.userInfo)
								this.$store.commit('setToken', res.data.token)
								uni.showToast({
									icon: "success",
									title: res.msg
								});
								this.getStarNum()
								uni.navigateBack()
							}
						})
					}
				})
				// #endif
			},
			//打赏功能
			reward() {
				let userInfo = uni.getStorageSync('userInfo')
				console.log(userInfo)
				uni.getProvider({
					service: 'payment',
					success(res) {
						if (res.errMsg === "getProvider:ok") {
							//支付宝支付
							if (res.provider[0] === 'alipay') {
								my.getAuthCode({
									scopes: 'auth_base'
								}).then(res => {
									console.log(res)
									request('/payment/alipay', {
										authCode: res.authCode,
										openId: userInfo.openId
										// money: 0.50,
										// trade_no: Number(Math.random().toString().substr(3, 0) + '' +
										// 	Date.now()).toString(36),
										// subject: '智选骑行支付宝小程序打赏'
									}).then(res => {
										console.log(res)
										my.tradePay({
											tradeNO: res.data.outTradeNo
										}).then(res => {
											console.log(res)
										})
									})
								})
							}
							// uni.requestPayment({
							// 	provider: res.provider[0],
							// 	orderInfo: {
							// 		tradeNO: Math.random().toString().slice(2,20)
							// 	}
							// })
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		height: 100vh;
		background: linear-gradient(#CFEAFF, #FFF);
		box-sizing: border-box;

		.content {
			margin: 0 50rpx 50rpx;
			padding-top: 80px;

			.panel {
				width: 100%;
				background-color: #fff;
				margin-top: 40rpx;
				padding: 20rpx;
				border-radius: 10px;
				box-sizing: border-box;
				box-shadow: 0px 2px 8px 0px rgba(178, 178, 178, 0.32);
			}

			.top {

				// 登录按钮的样式
				.btn-login {
					width: 90%;
					border-radius: 100px;
					margin: 30rpx auto;
				}

				.userInfo {
					display: flex;
					align-items: center;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.nickName {
						margin-bottom: 10rpx;
						font-size: 36rpx;
					}

					.tip {
						font-size: 28rpx;
					}
				}
			}

			.center {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.item {
					text-align: center;
					color: dimgrey;
					font-size: 30rpx;
					line-height: 1.25;

					.num {
						margin-bottom: 2px;
						color: #000;
					}
				}
			}

			.common-tools {
				padding: 40rpx;
				margin-bottom: 40rpx;

				.title {
					font-size: 40rpx;
					line-height: 1.5;
					margin-bottom: 20px;
				}

				.tools-list {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.item {
						width: 33%;
						text-align: center;

						::v-deep.u-icon {
							justify-content: center;

							.u-icon__icon {
								font-size: 30px !important;
								line-height: 1 !important;
							}

						}

						.text {
							font-size: 30rpx;
							margin-top: 5px;
							line-height: 1.25;
						}
					}
				}
			}

			.logout {
				width: 100%;
				border-radius: 100px;
				margin: 15px auto;
			}

		}

		::v-deep.u-popup {
			.u-popup__content {
				width: 90%;
			}

			.popup-comment {
				// padding: 10px;
				height: 360rpx;
				padding: 20rpx 30rpx;

				.u-textarea {
					.u-textarea__field {
						height: 85% !important;
					}
				}
			}

			.u-button {
				position: absolute;
				width: 20%;
				bottom: 30rpx;
				transform: translateX(-50%);
				left: 50%;
			}

			.uicon-close {
				font-size: 15px !important;
			}
		}
	}
</style>
